import {
    write
} from "fs";

var aaa = () => {
    window.onload = () => {
        goBarChart([
            [1, 1, 50],
            [2, 50, 30],
            [3, 100, 80],
            [4, 150, 60],
            [5, 200, 60],
            [6, 250, 90],
            [7, 300, 80]
        ])


    };



    // testCanvas.width = genemap[0].clientWidth;
    // testCanvas.height = genemap[0].offsetHeight;
    // testCanvas.style.background = 'red';
    // console.log(testCanvas.style)
}

function goBarChart(dataArr) {
    var testCanvas, ctx, genemap;

    var cWidth, cHeight, cMargin, cSpase;
    var originX, originY;

    var bMargin, tobalBars, bWidth, maxValue;

    var ctr, number, speed;

    var mousePosition = {};

    testCanvas = document.getElementById('test-canvas');
    if (testCanvas && testCanvas.getContext) {
        genemap = document.querySelectorAll('.genemap');
        ctx = testCanvas.getContext('2d');
        testCanvas.width = genemap[0].clientWidth;
        testCanvas.height = genemap[0].clientHeight;
    }

    initChart();

    function initChart() {
        function drawLine(ax, ay, bx, by) {
            ctx.beginPath();
            ctx.moveTo(ax, ay);
            ctx.lineTo(bx, by);
            ctx.stroke();
        }

        drawLine(20, testCanvas.height - 20, testCanvas.width - 20, testCanvas.height - 20);

        function rect(x, y, width, height, color) {
            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.rect(x, y, width, height);
            ctx.fill();
            ctx.closePath();
        }

        var colors = ['#f31b1b', '#f3c61b', '#f31b7d', '#6cf31b', '#1b48f3', '#1bf391', '#1bacf3', '#8e1bf3']

        function wrect() {
            var width = 20;
            for (var i = 0; i < dataArr.length; i++) {
                var height = dataArr[i][2];
                var x1 = 30 + i * 40 + i * 30;
                var x2 = 55 + i * 40 + i * 30;
                var y = testCanvas.height - 20 - height;
                var color = colors[i];
                rect(x1, y, width, height, color);
                rect(x2, y, width, height, color);
                write(dataArr[i][1], 30 + i * 40 + i * 10, testCanvas.height - 5)
            }
        }
        wrect()

        function write(start, ox, oy) {
            ctx.beginPath();
            ctx.fillStyle = "black";
            ctx.fillText(start, ox, oy);
            ctx.closePath();
        }
    }



    function drawTips(oX, oY) {
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = "rgba(0,0,0,0.5)";
        var H = 100;
        roundedRect(ctx, oX + 10, oY - H / 2, 2 * H, H, 5);

        ctx.fillStyle = "#fff";
        ctx.fillText('111', oX + H, oY - H / 10);
        ctx.fillText('222', oX + H, oY + H / 4);
        ctx.restore();
    }

    function roundedRect(ctx, x, y, width, height, radius) {
        ctx.moveTo(x, x + radius);
        ctx.beginPath();
        ctx.lineTo(x, y + height - radius);
        ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
        ctx.lineTo(x + width - radius, y + height);
        ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
        ctx.lineTo(x + width, y + radius);
        ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
        ctx.lineTo(x + radius, y);
        ctx.quadraticCurveTo(x, y, x, y + radius);
        ctx.closePath();
        ctx.fill();
    }

    testCanvas.onmousemove = function(e) {
        ctx.clearRect(0, 0, testCanvas.width, testCanvas.height);
        var offsetX = e.offsetX - 30;
        var offsetY = testCanvas.height - e.offsetY - 20;
        var n = parseInt(offsetX / 70);
        initChart();
        if (n < dataArr.length && offsetX >= 70 * n && offsetX <= 70 * n + 45 && offsetY <= dataArr[n][2] && offsetY >= 0) {
            drawTips(e.offsetX, e.offsetY)
        }
    }
}
export default {
    aaa
}